/**
 *@author   wuwg
 *@createTime   2018/03/20
 *@updateTime   2018/05/23
 *@description  水平滚动  component
 */
import config from '../../../../config/config.js'

// prefix
const prefixCls = config.prefix + '-scroll-track-h'
const transitionCls = config.prefix + '-scrollbar-transition'
const scrollbarCls = config.prefix + '-scroll-bar'
// module
const module = {
  name: config.prefix + '-scroll',
  components: {},
  props: {
    // 滚动区域的宽
    scrollAreaWidth: {
      type: Number,
      default: 0
    },
    // 滚动区域外围的宽
    scrollWrapperWidth: {
      type: Number,
      default: 0
    },
    // 滚动条位置
    scrollBarPostion: {
      type: Number,
      default: 0
    },
    // 父元素是否正在拖动
    draggingFromParent: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      // 滚动条的宽
      width: 0,
      // 是否可以拖动
      dragging: false,
      // 开始的位置
      start: 0
    }
  },
  watch: {
    'scrollWrapperWidth' (val, old) {
      if (val != old) {
        this.calculateSize()
      }
    },
    'scrollAreaWidth' (val, old) {
      if (val != old) {
        this.calculateSize()
      }
    }
  },
  computed: {
    wrapClasses () {
      return [
        prefixCls,
        this.dragging || this.draggingFromParent ? '' : transitionCls
      ]
    },
    scrollbarClass () {
      return [
        scrollbarCls,
        this.dragging || this.draggingFromParent ? '' : transitionCls
      ]
    },
    style () {
      return {
        width: this.width + '%',
        left: this.scrollBarPostion + '%'
      }
    }

  },
  methods: {
    startDrag (e) {
      /*
       * 阻止默认事件
       * Artery.stopEvent(e);
       * mobile
       */
      e = e.changedTouches ? e.changedTouches[0] : e
      // 正在拖动
      this.dragging = true
      // 设置开始的位置
      this.start = e.pageX
    },
    onDrag (e) {
      if (this.dragging) {
        // 阻止默认事件
        Artery.stopEvent(e)
        e = e.changedTouches ? e.changedTouches[0] : e
        // x移动的距离
        const xMovement = e.pageX - this.start
        // x移动的百分比
        const xMovementPercentage = xMovement / this.scrollWrapperWidth * 100
        // 更新开始的位置
        this.start = e.pageX
        // 滚动条下次的位置
        const nextValue = this.scrollBarPostion + xMovementPercentage
        //  事件分发
        this.$emit('change-position', this.getComputedScrollBarPostion(nextValue), 'horizontal', true)
      }
    },
    stopDrag (e) {
      // 取消拖动
      this.dragging = false
      //  事件分发
      this.$emit('change-position', this.getComputedScrollBarPostion(this.scrollBarPostion), 'horizontal', false)
    },
    clickGoto (e) {
      const isContainer = e.target === this.$el
      if (isContainer) {
        // Get the Element Position
        const position = this.$refs.scrollbar.getBoundingClientRect()
        // x移动的距离
        const xMovement = e.pageX - position.left
        // 宽的2分之1
        const centerize = (this.width / 2)
        // x移动的百分比，减去宽的2分之1，刚好让滚动条处于中心
        const xMovementPercentage = xMovement / this.scrollWrapperWidth * 100 - centerize
        // 更新开始的位置
        this.start = e.pageX
        // 滚动条下次的位置
        const nextValue = this.scrollBarPostion + xMovementPercentage
        //  事件分发
        this.$emit('change-position', this.getComputedScrollBarPostion(nextValue), 'horizontal')
      }
    },
    // 获取滚动条的最终位置
    getComputedScrollBarPostion (postion) {
      // Check For the Max Position
      const _maxValue = 100 - this.width
      let _scrollBarPosition = postion
      if (_scrollBarPosition < 0) {
        _scrollBarPosition = 0
      }
      if (_scrollBarPosition > _maxValue) {
        _scrollBarPosition = _maxValue
      }
      return _scrollBarPosition
    },
    calculateSize () {
      // Scrollbar Width
      this.width = this.scrollWrapperWidth / this.scrollAreaWidth * 100
    }

  },
  updated () {

  },
  created () {

  },
  mounted () {
    this.calculateSize()
    // Put the Listener
    document.addEventListener('mousemove', this.onDrag)
    document.addEventListener('touchmove', this.onDrag)
    document.addEventListener('mouseup', this.stopDrag)
    document.addEventListener('touchend', this.stopDrag)
  },
  beforeDestroy () {
    // Remove the Listener
    document.removeEventListener('mousemove', this.onDrag)
    document.removeEventListener('touchmove', this.onDrag)
    document.removeEventListener('mouseup', this.stopDrag)
    document.removeEventListener('touchend', this.stopDrag)
  }
}
export default module
